<template lang="pug">
.view.cp-man-course-set.fix-flex-pos
  el-form.mancs-search(:inline="true")
    el-form-item
      el-select.select-width(v-model="kwType")
        el-option(label="编码", :value="1")
        el-option(label="名称", :value="2")
        el-option(label="描述", :value="3")
    el-form-item
      el-input(v-model="keyWord", placeholder="请输入", style="width: 200px")
    el-form-item(label="创建人 :")
      el-select.select-width(v-model="courseCreator", placeholder="请选择")
        el-option(label="全部", :value="null")
        el-option(v-for="(item, index) in empSelect", :key="index", :label="item.name", :value="item.value")
    el-form-item(label="创建日期 :")
      el-date-picker.date-width(
        v-model="dateRange",
        type="daterange",
        unlink-panels,
        start-placeholder="开始日期",
        end-placeholder="结束日期",
        value-format="timestamp",
        :default-time="['00:00:00', '23:59:59']")
    el-form-item(label="状态 :")
      el-select.select-width(v-model="status", placeholder="请选择")
        el-option(label="全部", :value="null")
        el-option(v-for="(item, index) in statusSelect", :key="index", :label="item.name", :value="item.value")
    el-form-item(label="可用性 :")
      el-select.select-width(v-model="avail", placeholder="请选择")
        el-option(label="全部", :value="null")
        el-option(v-for="(item, index) in availSelect", :key="index", :label="item.name", :value="item.value")
    el-form-item
      el-button(type="primary", @click="search") 搜索
    el-form-item
      el-button(type="primary", @click="creatCourceSet") 新建
    //- el-form-item
      el-button(@click="exportReport", plain) 导出
  //- 表格
  .mancs-table
    el-table(
      :data="dataList",
      highlight-current-row,
      v-loading="loadingData",
      size="mini",
      height="100%")
      el-table-column(show-overflow-tooltip, type="index", label="序号")
      el-table-column(show-overflow-tooltip, prop="courseCode", label="编码")
      el-table-column(show-overflow-tooltip, prop="courseName", label="名称")
      el-table-column(show-overflow-tooltip, prop="courseDesc", label="描述")
      el-table-column(show-overflow-tooltip, prop="courseCount", label="所含课程")
      el-table-column(show-overflow-tooltip, prop="courseCreator", label="创建人")
        template(slot-scope="scope")
          span {{ scope.row.courseCreator | compare-list(empSelect) }}
      el-table-column(show-overflow-tooltip, prop="courseCreatTime", label="创建日期")
        template(slot-scope="scope")
          span {{ scope.row.courseCreatTime | date-format }}
      el-table-column(show-overflow-tooltip, label="状态")
        template(slot-scope="scope")
          span {{ scope.row.status | compare-list(statusSelect) }}
      el-table-column(show-overflow-tooltip, label="可用性")
        template(slot-scope="scope")
          span {{ scope.row.avail | compare-list(availSelect) }}
      el-table-column(label="操作", min-width="120px")
        template(slot-scope="scope")
          el-tooltip(content="查看")
            i.icon-act.el-icon-view(@click="viewTrainPlan(scope.row, scope.$index)")
          el-tooltip(content="编辑")
            i.icon-act.el-icon-edit(@click="editTrainPlan(scope.row, scope.$index)")
          el-tooltip(content="删除")
            i.icon-act.el-icon-delete(@click="deleteTrainPlan(scope.row, scope.$index)")
          el-dropdown
            i.icon-act.el-icon-more
            el-dropdown-menu(slot="dropdown", class="inv-act-drop")
              el-dropdown-item.act-item(@click.native="reportTrainPlan(scope.row, scope.$index)")
                i.icon-act.el-icon-tickets
                span 报告
              el-dropdown-item.act-item(@click.native="publishTrainPlan(scope.row, scope.$index)")
                i.icon-act.el-icon-upload2
                span 发布
              el-dropdown-item.act-item(@click.native="stopTrainPlan(scope.row, scope.$index)")
                i.icon-act.el-icon-circle-close-outline
                span 终止
              el-dropdown-item.act-item(@click.native="finishTrainPlan(scope.row, scope.$index)")
                i.icon-act.el-icon-circle-check-outline
                span 已完成
  //- 分页
  el-pagination.mancs-pagination(
    background,
    layout="total, prev, pager, next, jumper",
    prev-text="上一页",
    next-text="下一页",
    @current-change="handleCurrentChange",
    :current-page="pageNum",
    :page-size="pageSize",
    :total="totalNum")
  //- 新建计划
  course-set-popup(
    :title="tpTitle",
    :visible.sync="tpVisible",
    :is-edit="tpEdit",
    :parent-data="formData",
    @submit="onFormSubmit",
    @close="tpVisible = false")
</template>

<script>
import { mapGetters } from 'vuex';
import TrainData from '@/data/train/trainManage';
import CourseSetPopup from './courseSetPopup';

export default {
  name: 'mancourseset',
  components: {
    CourseSetPopup
  },
  data() {
    return {
      loadingData: true,
      dataList: [],
      pageNum: 1,
      pageSize: 16,
      totalNum: 0,
      // 搜索条件
      kwType: 1,
      keyWord: null,
      courseCreator: null,
      dateRange: [],
      status: null,
      avail: null,
      // 弹出框
      tpTitle: '新建课程组合',
      tpVisible: false,
      tpEdit: false,
      formData: {},
      // 下拉框
      statusSelect: [
        { name: '待发布', value: 0 },
        { name: '已发布', value: 1 },
        { name: '已终止', value: 2 },
        { name: '已失效', value: 3 }
      ],
      availSelect: [
        { name: '启用', value: 0 },
        { name: '禁用', value: 1 }
      ]
    };
  },
  computed: {
    ...mapGetters({
      crsFormSelect: 'crsFormSelect',
      empSelect: 'empSelect'
    })
  },
  created() {
  },
  mounted() {
    this.loadDataList();
  },
  methods: {
    // 整理参数
    filterParams() {
      const params = {
        kwType: this.kwType,
        keyWord: this.keyWord,
        courseCreator: this.courseCreator,
        status: this.status,
        avail: this.avail
      };
      if (this.dateRange && this.dateRange[0]) {
        params.startCreationTime = this.dateRange[0];
        params.endCreationTime = this.dateRange[1];
      }
      for (const key in params) {
        if (params[key] === null || params[key] === '') {
          delete params[key];
        }
      }
      return params;
    },
    // 取得表格数据
    loadDataList() {
      this.loadingData = true;
      // const params = this.filterParams();
      setTimeout(() => {
        this.dataList = TrainData.trainPlanList;
        this.totalNum = 64;
        this.loadingData = false;
      }, 500);
    },
    // 搜索
    search() {
      if (this.pageNum !== 1) {
        this.pageNum = 1;
      }
      this.loadDataList();
    },
    // 页码改变
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
      this.loadDataList();
    },
    // 新建
    creatCourceSet() {
      this.tpTitle = '新建课程组合';
      this.tpVisible = true;
      this.tpEdit = true;
      this.formData = {};
    },
    // 查看
    viewTrainPlan(row, index) {
      console.log('viewTrainPlan', row, index);
    },
    // 编辑
    editTrainPlan(row, index) {
      console.log('editTrainPlan', row, index);
    },
    // 删除
    deleteTrainPlan(row, index) {
      console.log('deleteTrainPlan', row, index);
      this.$confirm('此操作将永久删除该条记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        setTimeout(() => {
          if (Math.random() > 0.5) {
            this.dataList.splice(index, 1);
            this.totalNum = this.totalNum - 1;
            this.$message({ message: '删除成功', type: 'success' });
          } else {
            this.$message.error('删除失败');
          }
        }, 500);
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' });
      });
    },
    // 报告
    reportTrainPlan(row, index) {
      console.log('reportTrainPlan', row, index);
    },
    // 发布
    publishTrainPlan(row, index) {
      console.log('publishTrainPlan', row, index);
    },
    // 终止
    stopTrainPlan(row, index) {
      console.log('stopTrainPlan', row, index);
    },
    // 完成
    finishTrainPlan(row, index) {
      console.log('finishTrainPlan', row, index);
    },
    // 保存提交成功
    onFormSubmit(data) {
      if (data.isNew) {
        // 新增
        this.dataList.unshift({});
        this.$set(this.dataList, 0, data);
        this.totalNum = this.totalNum + 1;
      } else {
        const index = this.dataList.findIndex(item => item.orderNo === data.orderNo);
        this.$set(this.dataList, index, data);
      }
    }
  }
};
</script>

<style lang="sass">
@import "../../../../styles/utils"
$SEARCHHEIGHT: 56px
$SELECTWIDTH: 100px
$PADDINGWIDTH: 16px
.cp-man-course-set
  .mancs-search
    height: $SEARCHHEIGHT
    padding: 12px 0 12px 16px
    overflow-x: auto
    overflow-y: hidden
    .select-width
      width: $SELECTWIDTH
    .date-width
      width: 260px
    .el-form-item
      margin-right: 14px
    .el-form-item__label
      margin-left: 6px
      padding-right: 6px
    .el-date-editor .el-range__close-icon
      width: 20px
    .el-form-item--small .el-form-item__content, .el-form-item--small .el-form-item__label
      height: 32px
  .mancs-table
    position: absolute
    top: $SEARCHHEIGHT
    bottom: 56px
    left: 16px
    right: 16px
    overflow-x: hidden
    overflow-y: auto
    &::before
      display: none
    .icon-act
      font-size: 16px
      font-weight: 500
      cursor: pointer
      margin-left: 3px
      margin-right: 3px
      &:hover
        color: #5D9BFB
  .el-table
    th, td
      text-align: center
  .mancs-pagination
    position: absolute
    bottom: 12px
    left: 0
    right: 0
    text-align: center
.inv-act-drop .icon-act
  font-size: 16px
  font-weight: 500
  cursor: pointer
  margin-left: -3px
  margin-right: 6px
</style>
